<template>
  <view class="container pa-16">
    <SupplyDemandInfo :data="data" :hide-statistics="hideStatistics" />
    <view
      v-if="data?.agentFlag"
      class="px-8 py-2 br-10 fz-12 linh-16"
      style="color: #e29942; background-color: #fff4e7; width: fit-content"
    >
      本条供需信息由秘书处代发
    </view>
    <!-- 供需内容 -->
    <view class="py-12">
      <InfoRow :icon="'\ue683'" label="合作类型：" :value="data?.cooperationTypeName" />
      <InfoRow
        :icon="'\ue6d5'"
        :label="data?.boType === BoTypeEnum.Demand ? '行业要求：' : '所属行业：'"
        :value="data?.industryCategoryNames"
      />
      <InfoRow
        v-if="data?.cooperationDurationType === CooperationDurationTypeEnum.LongTerm"
        :icon="'\ue62e'"
        label="合作期限："
        value="长期可合作"
      />
      <InfoRow
        v-if="data?.cooperationDurationType === CooperationDurationTypeEnum.LimitedDate"
        :icon="'\ue62e'"
        label="合作期限："
        :value="formatToDate(data?.cooperationDatetime)"
      />
      <InfoRow :icon="'\ue613'" label="合作地区：" :value="getAddressTextCom" />
      <InfoRow
        v-if="data?.incentiveOpen"
        :icon="'\ue62e'"
        color="#EA5E0E"
        label="撮合激励："
        :value="getIncentiveDetails({ ...data })"
        margin="0"
      />
      <view v-if="data?.incentiveOpen" style="color: #969799; padding-left: 180rpx;font-size: 28rpx;">
        （本内容仅秘书处管理员可见）
      </view>
    </view>
    <!-- 供需详情 -->
    <SupplyDemandRichText
      :data="data?.details"
      :title="`${data?.boType === BoTypeEnum.Supply ? '供应详情' : '需求详情'}`"
    />
    <!-- 内容附件 -->
    <ContentAttachments v-if="data?.attachmentUrls?.length" :list="data?.attachmentUrls" />
  </view>
</template>

<script setup lang="ts">
  import SupplyDemandInfo from './SupplyDemandInfo.vue';
  import InfoRow from './InfoRow.vue';
  import SupplyDemandRichText from './SupplyDemandRichText.vue';
  import ContentAttachments from './ContentAttachments.vue';
  import { computed, type PropType } from 'vue';
  import type { ISupplyDemandDetailsResult } from '@/api/businessOpportunities/type';
  import { BoTypeEnum, CooperationDurationTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { formatToDate } from '@/utils/dateUtil';
  import { getAddressText, getIncentiveDetails } from './utils';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    data: Object as PropType<ISupplyDemandDetailsResult>,
    /** 隐藏统计数据 */
    hideStatistics: propTypes.bool.def(false),
  });

  /** 地址 */
  const getAddressTextCom = computed(() => {
    const data = props.data!;
    return getAddressText(data);
  });
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
  }
</style>
